<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/newbase.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>退换货</title>
    <script>
        $(function () {
            var h=$(".photo li").width();
            $(".fileInputContainer").css({height:h+"px"});
            $(".fileInput").css({height:h+"px"});
        })
    </script>
</head>
{include file="public/href" /}
<body>
<div class="wrap-log">
    <div class="header">
        <p>退换货</p>
        <a href="{:url('mobile/user_info/member_order')}?status={:input('status','all')}&title={:input('title')}">
            <img src="__STATIC__/img/back.png" class="back" >
        </a>
    </div>
    <div class="tablist">
        <ul>
            <li {eq name='$Request.action' value="return_money" }class="cur"{/eq}>
            <a href="{:url('member_order/return_money')}?status={:input('status','all')}&order_id={:input('order_id')}">申请退换货</a>
            </li>
            <li {eq name='$Request.action' value="return_money_record" }class="cur"{/eq}>
            <a href="{:url('member_order/return_money_record')}?status={:input('status','all')}&order_id={:input('order_id')}">退换货记录</a>
            </li>
        </ul>
    </div>
    <div class="tabcon">
        <form class="registerform" id="registerform" name="forms" action="" method="post">
            <div class="cur" id="center">
                <h4>退款类型</h4>
                <ul class="tablist1">
                    <li {eq name="$status" value="1"}class="cur"{/eq} id="li1">
                    <a href="javascript:change_types(1);">我要退款<span>(无需退货)</span></a>
                    <img src="__STATIC__/img_user/cur.png" class="checked">
                    </li>
                    <li {eq name="$status" value="3"}class="cur"{/eq} id="li2">
                    <a href="javascript:change_types(2);">我要退货</a>
                    <img src="__STATIC__/img_user/cur.png" class="checked">
                    </li>
                </ul>
                <input type="hidden" value='{eq name="$status" value="1"}1{else/}2{/eq}' name="type" />
                <input type="hidden" value="{:input('order_id')}" name="order_id" />
                <div class="tabcon1">
                    <div class="cur">
                        <h4>退款原因</h4>
                        <input name="cause" id="asd" type="text" value=""
                               placeholder="请输入退款原因"
                               class="text" datatype="*"
                               nullmsg="请输入退款原因" errormsg="请输入退款原因">
                        <h4>退款金额</h4>
                        <input name="amount" type="text" value=""
                               placeholder="请输入退款金额"
                               class="text" datatype="money"
                               nullmsg="请输入退款金额" errormsg="请输入退款金额">
                        <h4>退款说明</h4>
                        <input name="explain" type="text" value=""
                               placeholder="请输入退款说明200字符以内"
                               class="text" datatype="*1-200"
                               nullmsg="请输入退款说明" errormsg="请输入退款说明">
                        <h4>物流单号</h4>
                        <input name="tracking_number" type="number" value=""
                               placeholder="请输入物流单号"
                               class="text" >
                        <h4>上传凭证</h4>
                        <ul class="photo">
                            <li id="btn" style="height: 80px;width: 80px;margin-bottom: 5px;"><img src="__STATIC__/img_user/pl-tupian.png">
                            </li>
                            <ul id="ul_pics"></ul>
                            <div id="img2"><input name='picArr[]' id="picArr" type='hidden' value=''></div>
                            <div class="cl"></div>
                        </ul>
                        <input type="submit" class="submit" value="提交申请">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/static/plupload/plupload.full.min.js"></script>
{include file="public/src" /}
<script type="text/javascript">
    // 验证
    $(function () {



        $.Tipmsg.r = null;
        $.Tipmsg.p = null;
        $.Datatype.money = /^-?\d+\.?\d{0,2}$/;
        var showmsg = function (msg) {
            layer.open({content:msg,skin:'msg',time:2});
            return false;
        };
        var demo = $('.registerform').Validform({
            tiptype: function (msg) {
                layer.open({content:msg,skin:'msg',time:2});
                return false;
            },
            ajaxPost: true,
            callback: function (data) {
                if (data.code == '200') {
                    layer.open({content:data.message,skin:'msg',time:2});
                    setTimeout(function () {
                        location.href = "{:url('mobile/user_info/member_order')}?status={:input('status')}";
                    }, 2000);
                } else {
                    layer.open({content:data.message,skin:'msg',time:2});
                    return false;
                }
            }
        });
        demo.config({
            ajaxpost:{
                error: function () {
                    layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                }
            }
        })

    });

    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: 'btn',
        url: "{:url('user_info/uploadImg')}",
        flash_swf_url: '__STATIC__/wap/js/plupload/Moxie.swf',
        silverlight_xap_url: '__STATIC__/wap/js/plupload/Moxie.xap',
//        filters: {
//            max_file_size: '2048kb',
//            mime_types: [
//                {title: "files", extensions: "jpg,png,gif,jpeg,PNG,JPG,JPEG,GIF"}
//            ]
//        },
        multi_selection: true,
        init: {
            FilesAdded: function (up, files) {

                if ($("#ul_pics").children("li").length >= 4) {
                    layer.open({content:'你上传的图片太多了',skin:'msg',time:2});
                    uploader.destroy();
                } else {
                    var li = '';
                    plupload.each(files, function (file) {
                        li += "<li id='1" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                    });
                    $("#ul_pics").append(li);
                    uploader.start();

                }
            },
            UploadProgress: function (up, file) {
                var percent = file.percent;
                $("#1" + file.id).find('.bar').css({"width": percent + "%"});
                $("#1" + file.id).find(".percent").text(percent + "%");
            },
            FileUploaded: function (up, file, info) {
                if ($("#ul_pics").children("li").length >= 4) {
                    layer.open({content:'最多只能上传3张图片',skin:'msg',time:2});
                    $("#1" + file.id).remove('');
                    return false;
                    uploader.destroy();
                }
                document.getElementById('img2').innerHTML = '';

//                        var data = JSON.parse(info.response);
                var data = eval("(" + info.response + ")");
                $("#1" + file.id).html("<img style='height: 80px;width: 80px;float: left;margin-bottom: 10px;' src='/" + data.picUrl + "'/><input name='picArr[]' id='picArr' type='hidden' value='" + data.picUrl + "'><a style='float: right;margin-top:-5px;position:absolute;margin-left: -10px; ' onclick=img_del('1" + file.id + "','" + data.picUrl + "','{:url(\'user_info/uploadImgDestroy\')}')><img style='height: 10px; width: 10px;' src='/static/console/images/icon21.png'/></a>");
            },
            Error: function (up, err) {
                layer.open({content:'服务器异常,请重新上传',skin:'msg',time:2});
            }
        }
    });
    uploader.init();
    // 取消上传图片
    function img_del(id, picUrl, url) {

        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            data: {picUrl: picUrl},
            async: true,
            success: function (data) {
                if (data.code == '200') {
                    $("#" + id).remove('');
                    layer.open({content:data.message,skin:'msg',time:2});
                } else {
                    layer.open({content:data.message,skin:'msg',time:2});
                    return false;
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
    }
    //更改退款类型
    function change_type(z){
        //查看订单的状态
        $.ajax({
            url:"{:url('mobile/member_order/check_status')}",
            data:{'order_id' : "{:input('order_id')}"},
            dataType :'json',
            type:'post',
            success:function (data) {

                if (data.code == 400){
                    layer.open({content:data.message,skin:'msg',time:2});
                }else{
                    $('#li'+z).addClass('cur').siblings('li').removeClass('cur');
                    $("[name='type']").val(z);
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
    }
</script>
</body>
</html>